<h2> Create a new variableset</h2>
<form nz-form (ngSubmit)="createVariableSet()">
    <nz-row>
        <nz-col [nzSpan]="12">
            <nz-form-item>
                <nz-form-label>
                    VariableSet name
                </nz-form-label>
                <nz-form-control>
                    <input nz-input name="name" id="vsname"  [(ngModel)]="newVariableSetName">
                </nz-form-control>
            </nz-form-item>
        </nz-col>
        <nz-col [nzOffset]="1">
            <nz-form-item> 
                <button nz-button nzType="primary" [nzLoading]="varFormLoading">Create</button>
            </nz-form-item>
        </nz-col>
    </nz-row>
</form>
<h2> List of existing variablesets</h2>
<nz-table #table [nzData]="project.variablesets">
    <thead>
        <tr>
            <th>VariableSet name</th>
            <th>Deletion</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of table.data">
            <td (click)="selectVariableSet(data)">{{data.name}}</td>
            <td>
                <button nz-button nzDanger nzType="primary" [nzLoading]="loading" nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this variableset ? it will remove all items"
                (nzOnConfirm)="deleteVariableSet(data)">Delete</button>
            </td>
        </tr>
    </tbody>
</nz-table>
<nz-drawer class="toto" nzPlacement="right" [nzWidth]="1000" [nzTitle]="selectedVariableSet?.name" [nzVisible]="selectedVariableSet" (nzOnClose)="unselectVariableSet()">
    <ng-container *nzDrawerContent>
        <app-project-variable-set-items [project]="project" [variableSet]="selectedVariableSet"></app-project-variable-set-items>
      </ng-container>
</nz-drawer>